<template>
	<div class="session-search-container">
		<el-form :model="form" label-width="84px" :inline="true" class="demo-form-inline">
			<el-form-item label="拨号开始时间：">
				<el-col :span="11">
					<el-date-picker v-model="form.startDialingTime" type="datetime" placeholder="请选择开始时间" align="right" :picker-options="pickerOptions"> </el-date-picker>
				</el-col>
				<el-col class="search-line" :span="2">~</el-col>
				<el-col :span="11">
					<el-date-picker v-model="form.endDialingTime" type="datetime" placeholder="请选择结束时间" align="right" :picker-options="pickerOptions"> </el-date-picker>
				</el-col>
			</el-form-item>
			<el-form-item label="是否接通">
				<el-select v-model="form.isAccepted" placeholder="请选择是否接通">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="是否派工">
				<el-select v-model="form.isRinging" placeholder="请选择是否派工">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="是否卡顿">
				<el-select v-model="form.isStucked" placeholder="请选择是否卡顿">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="是否无画面">
				<el-select v-model="form.isNoPicture" placeholder="请选择是否无画面">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="是否排队放弃">
				<el-select v-model="form.isGiveUpQueued" placeholder="请选择是否排队放弃">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="会话方式">
				<el-select v-model="form.type" placeholder="请选择会话方式">
					<el-option v-for="item in modeOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="sessionId">
				<el-input v-model="form.sessionId" placeholder="请选择sessionId"></el-input>
			</el-form-item>
			<el-form-item label="坐席工号/姓名">
				<el-input v-model="form.userName" placeholder="坐席工号/姓名"></el-input>
			</el-form-item>
			<el-form-item label="会话小结">
				<el-select v-model="form.summaryIsCompleted" placeholder="请选择会话小结">
					<el-option v-for="item in summaryIsCompletedOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="评价">
				<el-select v-model="form.score" placeholder="请选择评价">
					<el-option v-for="item in scoreOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="" class="btn">
				<el-button class="serch-btn" @click="search">筛选</el-button>
				<el-button @click="reset">重置</el-button>
			</el-form-item>
		</el-form>
		<div class="export-btn" @click="exportAgentInfo">
			<el-button type="primary" icon="el-icon-upload2">导出</el-button>
		</div>
	</div>
</template>

<script>
import moment from 'moment';
export default {
	data() {
		return {
			form: {
				startDialingTime: '',
				endDialingTime: '',
				isAccepted: '', //是否接通
				isRinging: '', //是否派工
				isStucked: '', //是否卡顿
				isNoPicture: '', //是否无画面
				isGiveUpQueued: '', //是否排队放弃
				type: '', //会话方式
				sessionId: '', // 会话ID
				userName: '', // 工号或姓名
				summaryIsCompleted: '', // 会话小结状态
				score: '' // 评价
			},
			summaryIsCompletedOptions: [
				{
					value: 'Y',
					label: '已完成'
				},
				{
					value: 'N',
					label: '未完成'
				}
			],
			scoreOptions: [
				{
					value: '-1',
					label: '未提交'
				},
				{
					value: '5',
					label: '非常满意'
				},
				{
					value: '4',
					label: '满意'
				},
				{
					value: '3',
					label: '一般'
				},
				{
					value: '2',
					label: '不满意'
				},
				{
					value: '1',
					label: '非常不满意'
				}
			],
			options: [
				{
					value: '',
					label: '全部'
				},
				{
					value: true,
					label: '是'
				},
				{
					value: false,
					label: '否'
				}
			],
			modeOption: [
				{
					value: '',
					label: '全部'
				},
				{
					value: 'normal',
					label: '初始会话'
				},
				{
					value: 'transfer',
					label: '场景转接'
				}
			],
			pickerOptions: {
				shortcuts: [
					{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					},
					{
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					},
					{
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}
				]
			}
		};
	},
	methods: {
		search() {
			this.form.startDialingTime = this.form.startDialingTime ? moment(this.form.startDialingTime).toISOString() : '';
			this.form.endDialingTime = this.form.endDialingTime ? moment(this.form.endDialingTime).toISOString() : '';
			this.$emit('search', this.form);
		},
		reset() {
			this.$emit('reset', this.form);
		},
		/** 导出表格数据 */
		async exportAgentInfo() {
			this.form.startDialingTime = this.form.startDialingTime ? moment(this.form.startDialingTime).toISOString() : '';
			this.form.endDialingTime = this.form.endDialingTime ? moment(this.form.endDialingTime).toISOString() : '';
			this.$emit('export', this.form);
		},
	}
};
</script>

<style lang="less" scoped>
.session-search-container {
	.el-form {
		display: flex;
		flex-wrap: wrap;
		.el-form-item {
			margin: 0px;
		}
		.btn {
			padding-left: 20px;
			.el-button {
				height: 32px;
				width: 64px;
				padding: 0;
				border: 1px solid #6384fe;
				color: #6384fe;
			}
			.serch-btn {
				background-color: #6384fe;
				color: #fff;
			}
		}
	}
	.export-btn {
		margin-bottom: 15px;
		margin-top: 10px;
		cursor: pointer;
		z-index: 1;
		position: relative;
		width: fit-content;
	}
}
</style>
<style lang="less">
.session-search-container {
	.el-form-item {
		label {
			padding: 0;
			margin-right: 15px;
		}
		input {
			height: 34px !important;
		}
	}
	.btn {
		.el-form-item__content {
		}
	}
	.search-line {
		text-align: center;
		padding: 0 10px;
	}
	.el-form-item__label {
		font-size: 12px;
	}
}
</style>
